<template>
  <div class="d-flex flex-row justify-space-between align-center data">
    <div class="card d-flex flex-column justify-center align-center active">
      <div class="number">{{globalStatics.active[0]}}</div>
      <div class="label">确诊病例(例)</div>
      <div class="change">今日新增<span class="sub-number">{{globalStatics.active[1]}}</span></div>
    </div>
    <div class="card d-flex flex-column justify-center align-center cases">
      <div class="number">{{globalStatics.cases[0]}}</div>
      <div class="label">累计确诊(例)</div>
      <div class="change">今日新增<span class="sub-number">{{globalStatics.cases[1]}}</span></div>
    </div>
    <div class="card d-flex flex-column justify-center align-center recovered">
      <div class="number">{{globalStatics.recovered[0]}}</div>
      <div class="label">累计治愈(例)</div>
      <div class="change">今日新增<span class="sub-number">{{globalStatics.recovered[1]}}</span></div>
    </div>
    <div class="card d-flex flex-column justify-center align-center deaths">
      <div class="number">{{globalStatics.deaths[0]}}</div>
      <div class="label">累计死亡(人)</div>
      <div class="change">今日新增<span class="sub-number">{{globalStatics.deaths[1]}}</span></div>
    </div>
    <div class="card d-flex flex-column justify-center align-center vaccinated">
      <div class="number">{{vaccinated}}</div>
      <div class="label">疫苗注射(次)</div>
      <div class="change">今日新增<span class="sub-number"></span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardGroup',
  props: {
    vaccinated: {default: '正在加载...', type: String},
  },
  data() {
    return {
      globalStatics: {
        cases: ['正在加载...', '正在加载...'],
        deaths: ['正在加载...', '正在加载...'],
        recovered: ['正在加载...', '正在加载...'],
        active: ['正在加载...', '正在加载...'],
        vaccinated: ['正在加载...', '正在加载...'],
      },
    }
  },
  mounted() {
    let that = this;
    this.$api.overview.globalData().then((res) => {
      if(res.success) {
        this.$set(this.globalStatics.active, 0, that.$formatNumber(res.data.active + ''));
        this.$set(this.globalStatics.active, 1, that.$formatNumber(res.data.todayCases + ''));
        this.$set(this.globalStatics.deaths, 0, that.$formatNumber(res.data.deaths + ''));
        this.$set(this.globalStatics.deaths, 1, that.$formatNumber(res.data.todayDeaths + ''));
        this.$set(this.globalStatics.cases, 0, that.$formatNumber(res.data.cases + ''));
        this.$set(this.globalStatics.cases, 1, that.$formatNumber(res.data.todayCases + ''));
        this.$set(this.globalStatics.recovered, 0, that.$formatNumber(res.data.recovered + ''));
        this.$set(this.globalStatics.recovered, 1, that.$formatNumber(res.data.todayRecovered + ''));
      }
    });
  }
}
</script>

<style scoped>
.data{
  width: 100%;
  height: 150px;
}
.data .card{
  width: 256px;
  height: 144px;
  border: 1px solid silver;
  border-radius: 6px;
}
.data .card .number{
  font-size: 40px;
}
.data .card .label{
  color: black;
  font-size: 24px;
}
.data .card .change{
}

.data .card.cases{
  border-color: #870000;
}
.data .card.cases .number{
  color: #870000;
}
.data .card.cases .change .sub-number{
  color: #870000;
}

.data .card.deaths{
  border-color: #000000;
}
.data .card.deaths .number{
  color: #000000;
}
.data .card.deaths .change .sub-number{
  color: #000000;
}

.data .card.active{
  border-color: #fa2929;
}
.data .card.active .number{
  color: #fa2929;
}
.data .card.active .change .sub-number{
  color: #fa2929;
}

.data .card.recovered{
  border-color: #A5B480;
}
.data .card.recovered .number{
  color: #A5B480;
}
.data .card.recovered .change .sub-number{
  color: #A5B480;
}

.data .card.vaccinated{
  border-color: #2196F3;
}
.data .card.vaccinated .number{
  color: #2196F3;
}
.data .card.vaccinated .change {
  opacity: 0;
}
.data .card.vaccinated .change .sub-number{
  color: #2196F3;
}
</style>